// Scaffold
//
// Contains the building blocks of the dashboard template. Try to avoid adding any painting-type styles to this file.
// We're all about position in here. Painting styles for the navbar and panel can be found in their respective scss files.
// The basic structure of the dashboard is as follows:
//
// main-container
// --------------------------------------------------------------------------------------
//   navbar
//   ------------------------------------------------------------------------------------
//   main-row
//
//     panel-left               | main                          | panel-right
//       panel-content-wrapper  |  content                      |   panel-content-wrapper
//         panel-content        |  ---------------------------- |     panel-content
//                              |  footer                       |
// --------------------------------------------------------------------------------------
//
// This file also contains the CSS support for the drawer (i.e., the hamburger menu) functionality.
//
// No styleguide reference.

.main-container {
    width: 100%;
    height: 100%;
    background-color: #fbfcff;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: $navbar-height;
    z-index: 1010;
    background-color: $brand-new-primary;
}

.main-row {
    display: flex;
    justify-content: center;
    height: 100%;
    padding-left: 40px;
    padding-right: 40px;

    @media (max-width: 806px) {
        padding-left: 0;
        padding-right: 0;
    }

    @include media-breakpoint-down(md) {
        display: block;
        width: 100%;
    }
}

.dashboard-main {
    flex-grow: 1;
    // The panels are fixed width and the main content fills the rest of the screen.
    // We want the content to load after the other assets to prevent janky loading, so we
    // position it after the two panels and order it to be in the center here.
    order: 2;
    display: flex;
    flex-direction: column;
    // Ensure the footer is flush with the bottom of the window if the page height is less than the window height.
    min-height: 100vh;
    margin-top: -$navbar-height;
    padding-top: $navbar-height;
    padding-left: $padding-row;
    padding-right: $padding-row;
    max-width: 1002px;
    min-width: 0;
    overflow-y: visible;

    .content {
        flex-grow: 1;
        padding-bottom: $footer-height + 60px;
    }

    .footer {
        flex-shrink: 0;
        height: $footer-height;
        margin-top: -$footer-height - 1px;
    }
}

// Panels

.panel {
    padding-top: 48px;
    padding-bottom: 48px;
}

.panel-content,
.panel-content-wrapper {
    width: 255px;
    height: 100%;
}

$panelMaxHeight: calc(100vh - #{$navbar-height * 2});

.panel-left {
    position: sticky;
    top: 16px;
    max-height: $panelMaxHeight;
    padding-bottom: 0;

    .panel-content {
        width: calc(100% + 24px);
        margin-left: -24px;
        padding-left: 24px;
        max-height: $panelMaxHeight;
        overflow: auto;
    }
}

.panel-right {
    order: 3;
    position: sticky;
    max-height: calc(100vh - #{$navbar-height});
    padding-top: calc(#{$navbar-height} + 8px);
    padding-bottom: 0;
    top: 16px;

    .panel-content {
        max-height: $panelMaxHeight;
        overflow: auto;
        padding-left: $spacer;
    }
}

// For wide panel-less pages, like the Dashboard Home page

.main-row-wide {
    .dashboard-main {
        max-width: 1296px;
    }

    .panel-right {
        display: none;
    }

    .panel-left {
        display: none;
    }
}

// Drawer functionality, and responsive show/hide

.drawer-show .dashboard-main {
    transform: translate3d($drawer-width, 0, 0);

    &::after {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.25);
        z-index: 3;
        content: "";
    }
}

.drawer-toggle {
    display: none;
}

.drawer-only {
    display: none;
}

.drawer-show {
    .drawer-only {
        display: block;
    }
}

@include media-breakpoint-down(md) {
    .panel-right {
        display: none;
    }

    .panel-left {
        display: none;
    }

    .drawer-toggle {
        display: block;
    }

    .dashboard-main {
        min-width: 100%;
        width: 100%;
    }

    .drawer-show .panel-left {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        display: block;
        width: $drawer-width;
        height: 100%;
        padding-top: $spacer * 4 + $navbar-height;
        overflow: auto;
    }
}
